<?php session_start(); ?>
<!DOCTYPE html>
<html lang="en" xmlns:fb="http://ogp.me/ns/fb#">
	<head>
		<meta charset="utf-8"> 
		<title>One Stop Travel</title>
		<meta name="description" content="Your One Stop Travel Planner">
		<link href="./css/custom.css" type="text/css" rel="stylesheet">
		<link href="./css/scrollbar.css" type="text/css" rel="stylesheet" />
	</head>
	<body onload="javascript:navigate('home')">
		<div class="navbar navbar-fixed-top">
			<div class="navbar-inner">
				<div class="container">
					<a class="brand" href="javascript:navigate('home')">OneStopTravelSG</a>
					<ul class="nav">
						<li class="active">
							<a href="javascript:navigate('home')"><i class="icon-home icon-white"></i> Home</a>
						</li>
						<li><a href="javascript:navigate('submitplace')"><i class="icon-share icon-white"></i> Submit a place</a></li>
					</ul>
					<ul class="nav pull-right">
						<form class="navbar-search">
							<input id="searchCountries" type="text" class="search-query" placeholder="Search places"></input>
						</form>
						<li class="divider-vertical"></li>
						<li class="dropdown" id="account">
							<a class="dropdown-toggle" data-toggle="dropdown" href="#account">
								<i class="icon-user icon-white"></i> Account
								<b class="caret"></b>
							</a>
							<ul class="dropdown-menu">
								<li><a href="#">View Profile</a></li>
								<li><a href="javascript:navigate('itinerary')">My Itinerary</a></li>
								<li class="divider"></li>
								<li><a href="#">Settings</a></li>
								<li>
									<?php
									if (isset($_SESSION['login']) && $_SESSION['login'] == "1")
										echo "<a href=\"./logout.php\">Sign Out</a>";
									else
										echo "<a href=\"#login\" data-toggle=\"modal\">Sign In</a>";
									?>
								</li>
							</ul>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="container">
			<div class="container overallempty">
			</div>
			<div class="container-fluid">
				<div class="span3">
					<div class="row-fluid">
						<div class="sidebar">
							<div class="accordion" id="searchAccordion">
								<div class="accordion-group">
									<div class="accordion-heading">
										<a class="accordion-toggle" data-toggle="collapse" data-parent="#searchAccordion" href="#accommSearchCollapse">
										<i class="icon-search"></i> Search accommodations
										</a>
									</div>
									<div id="accommSearchCollapse" class="accordion-body collapse in">
										<div class="accordion-inner">
											<div>
												<fieldset>
													<div class="control-group">
														<label class="control-label" for="accommpax">Number of pax:</label>
														<div class="controls">
															<select id="accommpax" name="accommpax">
																<option value="1">1</option>
																<option value="2">2</option>
																<option value="3">3</option>
																<option value="4">4</option>
																<option value="5">5</option>
																<option value="6">6</option>
																<option value=">6">>6</option>
																<option value="Any">Any</option>
															</select>
															<p class="help-block">How many of you are travelling?</p>
														</div>
													</div>
													<div class="control-group">
														<label class="control-label" for="accommdest">Destination:</label>
														<div class="controls">
															<select id="accommdest" name="accommdest">
																<option value="No preference">No preference</option>
																<option>--Taiwan--</option>
																<option value="Hualien">Hualien</option>
																<option value="Kaohsiung">Kaohsiung</option>
																<option value="Nantou">Nantou</option>
																<option value="New Taipei City">New Taipei City</option>
																<option value="Pingtung">Pingtung</option>
																<option value="Taichung">Taichung</option>
																<option value="Taipei">Taipei</option>
																<option value="Taoyuan">Taoyuan</option>
																<option value="Yilan">Yilan</option>
															</select>
															<p class="help-block">Where are you going?</p>
														</div>
													</div>
												</fieldset>
											</div>
											<a href="javascript:navigate('accommsearch')" class="btn btn-primary">Search!</a>
										</div>
									</div>
								</div>
								<div class="accordion-group">
									<div class="accordion-heading">
										<a class="accordion-toggle" data-toggle="collapse" data-parent="#searchAccordion" href="#transportSearchCollapse">
										<i class="icon-search"></i> Search transportations
										</a>
									</div>
									<div id="transportSearchCollapse" class="accordion-body collapse">
										<div class="accordion-inner">
											<div>
												<fieldset>
													<div class="control-group">
														<label class="control-label" for="transportmode">Mode of transportation:</label>
														<div class="controls">
															<select id="transportmode" name="transportmode">
																<option value="Car">Car</option>
																<option value="Bus">Bus</option>
																<option value="Train">Train</option>
																<option value="MRT">MRT</option>
																<option value="Walking">Walking</option>
																<option value="Bicycle">Bicycle</option>
																<option value=">Sea">>Sea</option>
																<option value="Any">Any</option>
															</select>
															<p class="help-block">What mode of transport are you taking?</p>
														</div>
													</div>
													<div class="control-group">
														<label class="control-label" for="transportfrom">From:</label>
														<div class="controls">
															<select id="transportfrom" name="transportfrom">
																<option value="No preference">No preference</option>
																<option>--Taiwan--</option>
																<option value="Hualien">Hualien</option>
																<option value="Kaohsiung">Kaohsiung</option>
																<option value="Nantou">Nantou</option>
																<option value="New Taipei City">New Taipei City</option>
																<option value="Pingtung">Pingtung</option>
																<option value="Taichung">Taichung</option>
																<option value="Taipei">Taipei</option>
																<option value="Taoyuan">Taoyuan</option>
																<option value="Yilan">Yilan</option>
															</select>
															<p class="help-block">Where are you taking off?</p>
														</div>
													</div>
													<div class="control-group">
														<label class="control-label" for="transportto">To:</label>
														<div class="controls">
															<select id="transportto" name="transportto">
																<option value="No preference">No preference</option>
																<option>--Taiwan--</option>
																<option value="Hualien">Hualien</option>
																<option value="Kaohsiung">Kaohsiung</option>
																<option value="Nantou">Nantou</option>
																<option value="New Taipei City">New Taipei City</option>
																<option value="Pingtung">Pingtung</option>
																<option value="Taichung">Taichung</option>
																<option value="Taipei">Taipei</option>
																<option value="Taoyuan">Taoyuan</option>
																<option value="Yilan">Yilan</option>
															</select>
															<p class="help-block">Where are you going to?</p>
														</div>
													</div>
												</fieldset>
											</div>
											<a href="javascript:navigate('transportsearch')" class="btn btn-primary">Search!</a>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="row-fluid">
						<div class="footer">
							<ul class="nav nav-list iconized">
								<li>
									<a href="javascript:navigate('ourteam')">
										<img src="./icons/png/glyphicons_043_group.png" width="15px" height="15px"/> Our team
									</a>
								</li>
								<li class="nav-divider"></li>
								<li>
									<a href="https://www.facebook.com/pages/OneStopTravelSG/150575751729907" target="_blank">
										<img src="./icons/png/glyphicons_320_facebook.png" width="15px" height="15px"/> Like us on Facebook!
									</a>
								</li>
								<li>
									<a href="https://twitter.com/#!/OneStopTravelSG" target="_blank">
										<img src="./icons/png/glyphicons_321_twitter_t.png" width="15px" height="15px"/> Follow us on Twitter!
									</a>
								</li>
								<li>
									<a href="https://plus.google.com/115302848969623324857" target="_blank">
										<img src="./icons/png/glyphicons_346_google_plus.png" width="15px" height="15px"/> Cirle us on Google+!
									</a>
								</li>
								<li>
									<a href="mailto:onestoptravel.sg@gmail.com">
										<img src="./icons/png/glyphicons_329_e-mail.png" width="15px" height="15px"/> Contact us!
									</a>
								</li>
								<li>
									<a href="http://www.youtube.com/onestoptravelsg" target="_blank">
										<img src="./icons/png/glyphicons_342_youtube.png" width="15px" height="15px"/> Subscribe to our channel on Youtube!
									</a>
								</li>
								<li id="flagcounter"></li>
							</ul>
							<div class="copyright">Web design template by <a href="http://twitter.github.com/bootstrap/index.html" target="_blank">Bootstrap, from Twitter</a></div>
							<div class="copyright">Icons by <a href="http://glyphicons.com/" target="_blank">Glyphicons.com</a></div>
							<div class="copyright">Domain sponsored by <a href="http://my.dot.tk/cgi-bin/amb/landing.dottk?nr=475623::10957152::1" target="_blank">My Dot TK</a></div>
							<div class="copyright">&copy; OneStopTravelSG 2012</div>
						</div>
					</div>
				</div>
				<div class="span8">
					<div class="row-fluid">
						<div class="mainframe" id="maincontent">
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--Modals here-->
		<div id="login" class="modal hide fade">
			<div class="modal-header">
				<a class="close" data-dismiss="modal">&times;</a>
				<h3>Login</h3>
			</div>
			<div class="modal-body">
				<fieldset>
					<div class="control-group">
						<label class="control-label" for="username">Username:</label>
						<div class="controls">
							<input id="username" type="text" name="username"></input>
							<p class="help-block">Your username should be alphanumeric, 6-20 characters in length</p>
						</div>
					</div>
					<div class="control-group">
						<label class="control-label" for="password">Password:</label>
						<div class="controls">
							<input id="password" type="password" name="password"></input>
							<p class="help-block">Your password should be alphanumeric, 6-20 characters in length</p>
						</div>
					</div>
				</fieldset>
			</div>
			<div class="modal-footer">
				Do not have an account? <a id="createuserbtn" data-dismiss="modal">Sign up now!</a>
				<a id="loginbtn" class="btn btn-primary" data-dismiss="modal">Login</a>
				<a href="#" class="btn" data-dismiss="modal">Cancel</a>
			</div>
		</div>
		<script language="javascript" type="text/javascript">
			function navigate(pagename)
			{
				if (window.XMLHttpRequest)
				{// code for IE7+, Firefox, Chrome, Opera, Safari
					xmlhttp=new XMLHttpRequest();
				}
				else
				{// code for IE6, IE5
					xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
				}
				xmlhttp.onreadystatechange=function()
				{
					if (xmlhttp.readyState==4 && xmlhttp.status==200)
					{
						document.getElementById("maincontent").innerHTML = xmlhttp.responseText;
						if (document.getElementById("flagcounter").innerHTML == "")
							loadFlagCounter();
						startCarousel();
					}
				}
				switch (pagename) {
					case "accommsearch":
						var accommpax = document.getElementById("accommpax").value;
						var accommdest = document.getElementById("accommdest").value;
						xmlhttp.open("GET", "./navigation.php?page=" + pagename + "&accommpax=" + accommpax + "&accommdest=" + accommdest, true);
						break;
					default:
						xmlhttp.open("GET","./navigation.php?page=" + pagename, true);
						break;
				}
				xmlhttp.send();
			}
			function loadFlagCounter()
			{
				if (window.XMLHttpRequest)
				{// code for IE7+, Firefox, Chrome, Opera, Safari
					xmlhttp=new XMLHttpRequest();
				}
				else
				{// code for IE6, IE5
					xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
				}
				xmlhttp.onreadystatechange=function()
				{
					if (xmlhttp.readyState==4 && xmlhttp.status==200)
					{
						document.getElementById("flagcounter").innerHTML = xmlhttp.responseText;
					}
				}
				xmlhttp.open("GET","./loadflagcounter.php");
				xmlhttp.send();
			}
		</script>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
		<script type="text/javascript" src="./js/bootstrap-tooltip.js"></script>
		<script type="text/javascript" src="./js/bootstrap-modal.js"></script>
		<script type="text/javascript" src="./js/bootstrap-popover.js"></script>
		<script type="text/javascript" src="./js/bootstrap-dropdown.js"></script>
		<script type="text/javascript" src="./js/bootstrap-typeahead.js"></script>
		<script type="text/javascript" src="./js/bootstrap-collapse.js"></script>
		<script type="text/javascript" src="./js/bootstrap-scrollspy.js"></script>
		<script type="text/javascript" src="./js/bootstrap-carousel.js"></script>
		<script type="text/javascript" src="./js/bootstrap-transitions.js"></script>
		<script type="text/javascript" src="./js/jquery.scroll.min.js"></script>
		<script type="text/javascript" src="./js/custom-query.js"></script>
		<script type="text/javascript" src="./js/load-social-buttons.js"></script>
	</body>
</html>